<template>
  <div class="dashboard-editor-container">

    <el-switch v-model="foodTotalPriceFlag" active-text="玉米" inactive-text="小麦">
    </el-switch>
    <panel-group :entry-price="entryTotalPrice" :out-price="outTotalPrice" :corn-price="cornTotalPrice"
      @handleSetLineChartData="handleSetLineChartData" />

    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">

      <line-chart :chart-data="lineChartData" />
    </el-row>

    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <raddar-chart />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <el-switch v-model="flag" active-text="入库" inactive-text="出库">
        </el-switch>
        <div class="chart-wrapper">
          <pie-chart :flag="flag" v-if="showPieChart && showDict" :dict-map="dictMap" :stack-out-data="stackOutData"
            :stack-entry-data="stackEntryData" />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <bar-chart :dict-map="dictMap" :bar-data="stackData" v-if="showPicChart && showDict" />
        </div>
      </el-col>
    </el-row>


  </div>
</template>

<script>
import { getWarehouseEntryStat, getWarehouseOutStat, getStackList } from '@/api/statistics'
import PanelGroup from './dashboard/PanelGroup'
import LineChart from './dashboard/LineChart'
import RaddarChart from './dashboard/RaddarChart'
import PieChart from './dashboard/PieChart'
import BarChart from './dashboard/BarChart'

import { getDicts } from '@/api/system/dict/data'

const lineChartData = {
  newVisitis: {
    expectedData: [100, 120, 161, 134, 105, 160, 165],
    actualData: [120, 82, 91, 154, 162, 140, 145]
  },
  messages: {
    expectedData: [200, 192, 120, 144, 160, 130, 140],
    actualData: [180, 160, 151, 106, 145, 150, 130]
  },
  purchases: {
    expectedData: [80, 100, 121, 104, 105, 90, 100],
    actualData: [120, 90, 100, 138, 142, 130, 130]
  },
  shoppings: {
    expectedData: [130, 140, 141, 142, 145, 150, 160],
    actualData: [120, 82, 91, 154, 162, 140, 130]
  }
}

export default {
  name: 'Index',
  components: {
    PanelGroup,
    LineChart,
    RaddarChart,
    PieChart,
    BarChart
  },
  watch: {
    foodTotalPriceFlag(val) {
      if (val) {
        this.handleSetPriceData('corn')
      } else {
        this.handleSetPriceData('wheat')
      }
    }
    
  },
  data() {
    return {
      lineChartData: lineChartData.newVisitis,
      pieChartData: null,
      flag: true,
      foodTotalPriceFlag: true,
      dictMap: {},
      entryTotalPrice: 0, // 入库总额
      outTotalPrice: 0,
      cornTotalPrice: 0,
      stackEntryData: [],
      stackOutData: [],
      stackData: [],
      showPicChart: false,
      showPieChart: false,
      showDict: false
    }
  },
  created() {
    this.init({})

  },
  mounted() {

  },
  methods: {
    async init(params) {
      this.getStackData({})
      this.getDict({});
      await getWarehouseEntryStat(params).then(response => {
        this.stackEntryData = response.data;
        this.showPieChart = true
      })
      await getWarehouseOutStat(params).then(response => {
        this.stackOutData = response.data;
      })
      this.handleSetPriceData('corn')
    },
    handleSetPriceData(type) {
      const cornEntryData = this.stackEntryData.find(item => item.foodType == type);
      const cornOutData = this.stackOutData.find(item => item.foodType == type);
      this.outTotalPrice = cornOutData.totalPrice;
      this.entryTotalPrice = cornEntryData.totalPrice;
    },
    getStackData(params) {
      getStackList(params).then(response => {
        this.stackData = response.data;
        this.showPicChart = true
      })
    },
    
    
    getDict(params) {
      getDicts('food_type').then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.dictMap[response.data[i].dictValue] = response.data[i].dictLabel
          this.showDict = true
        }
      })
    },
    handleSetLineChartData(type) {
      this.lineChartData = lineChartData[type]
    },
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
